<template>
  <div class="side_wrapper">
    <section class="about-dev">
      <header class="profile-card_header">
        <div class="profile-card_header-container">
          <div class="profile-card_header-imgbox">
            <img src="../../assets//images/user.jpg" alt="Mewy Pawpins" />
          </div>
          <h1>Smash</h1>
        </div>
      </header>
      <div class="profile-card_about">
        <h2>关于Smash</h2>
        <div class="profile-card_about-info">
          <p>Hello 你好鸭 O(∩_∩)O </p>
          <p>我 是大龄【24】社恐未婚程序员</p>
           <p>
             欢迎来到我的博客！！！ 一晃眼博客都上线1年了， 依旧是冷冷清清 o(╥﹏╥)o
           </p>
         <p>
           文章我瞎写的 仅供参考！ 若有建议 点击下方留言|
         </p>
        </div>
        <footer class="profile-card_footer">
          <div class="social-row">
            <div class="heart-icon" title="No Health Issues">
              <!-- Generated by IcoMoon.io -->
              <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                id="hearti"
                width="32"
                height="32"
                viewBox="0 0 32 32"
              >
                <path
                  fill="#444"
                  d="M24 12.977c-3.866 0-7 3.158-7 7.055 0 2.22 1.020 4.197 2.609 5.491-2.056 1.525-3.609 2.488-3.609 2.488s-14-8.652-14-15.622c0-4.2 2.583-8.399 7.5-8.399 4.5 0 6.5 4.296 6.5 4.296s1.75-4.296 6.5-4.296 7.416 4.115 7.416 8.399c0 0.958-0.272 1.943-0.716 2.932-1.281-1.436-3.134-2.344-5.2-2.344zM24 13.984c3.313 0 6 2.707 6 6.047s-2.687 6.048-6 6.048c-3.314 0-6-2.708-6-6.048s2.686-6.047 6-6.047zM21 21.039h2v2.016h2v-2.016h2v-2.016h-2v-2.016h-2v2.016h-2v2.016z"
                ></path>
              </svg>
            </div>
            <div class="paw-icon" title="Gets Along Well With Other Animals">
              <!-- Generated by IcoMoon.io -->
              <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
              <svg
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                id="pawi"
                width="26"
                height="28"
                viewBox="0 0 26 28"
              >
                <path
                  fill="#444"
                  d="M12.187 7.375q0 0.938-0.297 1.773t-0.984 1.445-1.641 0.609q-1.188 0-2.156-0.898t-1.437-2.117-0.469-2.359q0-0.938 0.297-1.773t0.984-1.445 1.641-0.609q1.203 0 2.164 0.898t1.43 2.109 0.469 2.367zM6.844 14.922q0 1.25-0.656 2.172t-1.859 0.922q-1.188 0-2.211-0.867t-1.57-2.086-0.547-2.375q0-1.25 0.656-2.18t1.859-0.93q1.188 0 2.211 0.867t1.57 2.094 0.547 2.383zM13 14.5q1.844 0 3.984 1.523t3.578 3.703 1.437 3.977q0 0.719-0.266 1.195t-0.758 0.703-1.008 0.313-1.188 0.086q-1.062 0-2.93-0.703t-2.852-0.703q-1.031 0-3.008 0.695t-3.133 0.695q-2.859 0-2.859-2.281 0-1.344 0.875-2.992t2.18-3.008 2.93-2.281 3.016-0.922zM16.734 11.203q-0.953 0-1.641-0.609t-0.984-1.445-0.297-1.773q0-1.156 0.469-2.367t1.43-2.109 2.164-0.898q0.953 0 1.641 0.609t0.984 1.445 0.297 1.773q0 1.141-0.469 2.359t-1.437 2.117-2.156 0.898zM23.484 9.578q1.203 0 1.859 0.93t0.656 2.18q0 1.156-0.547 2.375t-1.57 2.086-2.211 0.867q-1.203 0-1.859-0.922t-0.656-2.172q0-1.156 0.547-2.383t1.57-2.094 2.211-0.867z"
                ></path>
              </svg>
            </div>
          </div>
          <p>
            <router-link class="back-to-profile" to="/user">关于我</router-link>
          </p>
        </footer>
      </div>
    </section>
  </div>
</template>
  
  <script setup>
</script>
  
<style lang="scss" scoped>
.side_wrapper {
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 2px 4px 2px -2px rgba(0, 0, 0, 0.3),
  -2px -4px 15px -2px rgba(0, 0, 0, 0.2);
}

.profile-card_header-container {
  width: 100%;
  margin: auto;
}

.profile-card_header {
  background: #272727;
  padding: 15px 15px 10px;
  text-align: center;
}

/* profile picture */

.profile-card_header-imgbox {
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  margin: auto;
  background: rgba(250, 214, 195, 1);
  border: 0.375rem solid rgba(250, 214, 195, 1);
  z-index: 9;
}

.profile-card_header img {
  max-width: 100%;
}

/* header heading */

.profile-card_header h1 {
  color: #f3f3f3;
  font-size: 23px;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  position: relative;
}

/* header text span */

.profile-card_header h1 span {
  font-size: 14px;
  font-weight: 300;
  display: block;
  color: rgba(220, 220, 220, 0.95);
  margin-top: 5px;
  padding-top: 5px;
  border-top: 2px solid rgba(250, 214, 195, 1);
}

/* about section */

.profile-card_about {
  line-height: 1.5;
  background: #ededed;
  padding: 10px 20px;
  color: #222;
  font-family: "Lato", sans-serif;
}
.profile-card_about-info{
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}

.profile-card_about h2 {
  margin: 0;
  display: inline-block;
  color: #333;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  z-index: 99;
  vertical-align: middle;
}

.profile-card_about h2::before {
  content: "";
  position: absolute;
  width: 110%;
  /*  max-width: 13.8rem;
  */
  height: 10px;
  background: #c6f1eb;
  left: -5px;
  top: 50%;
  z-index: -1;
}

.profile-card_about p {
  font-weight: 300;
  font-size: 14px;
}

.profile-card_footer {
  margin-top: 12px;
  text-align: right;
}

/* social row */

.social-row {
  margin-right: 10px;
}

.paw-icon,
.heart-icon {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s;
}

#pawi,
#hearti {
  height: 18px;
  width: 18px;
  cursor: help;
  -webkit-transition: fill 0.3s ease-in-out;
  transition: fill 0.3s ease-in-out;
}

#pawi path,
#hearti path {
  fill: #272727;
}

.paw-icon:hover,
.heart-icon:hover {
  transform: scale(1.2);
}

/* back to profile link */

.back-to-profile,
.back-to-profile:visited {
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  color: #222;
  text-decoration: none;
  font-weight: bold;
  border-top: 0.3125rem solid rgba(0, 0, 0, 0);
  border-bottom: 0.3125rem solid #97ece1;
  -webkit-transition: border 0.3s ease-in-out;
  transition: border 0.3s ease-in-out;
}

.back-to-profile::after {
  content: "\25b6";
  margin: 0 0.75em;
  color: #222;
}

.back-to-profile:hover,
.back-to-profile:focus {
  border-top-color: #222;
  border-bottom-color: #fdc1a0;
}
</style>
  